<template>
	<view style="background-color: rgb(245, 245, 245);height: 100vh;">
		<navBar title="修改个人信息"></navBar>

		<view class="content">
			<u--form class="u-form" labelWidth="30" :model="form" :rules="rules" ref="form">
				<view class="u-form-body">
					<view class="body_start">

						<view class="body_start_top">
							<text><span class="text-body">*</span></text>
							<view class="body_start_left">
								头像:
							</view>
						</view>

						<view class="body_start_bottom">
							<view class="body_start_right" @click="uploadImg">
								<img style="width: 80px;height: 80px;" :src="newImg" alt="">
							</view>
						</view>
					</view>

					<view class="body_start">
						<view class="body_start_top">
							<text><span class="text-body">*</span></text>
							<view class="body_start_left">
								昵称:
							</view>
						</view>

						<view class="body_start_bottom">
							<view class="u-inputss">
								<u-form-item style="width: 193px;height: 35px;" prop="name" ref="item1">

									<u--input type="text" v-model="form.name" border="none" placeholder="请输入内容"
										clearable></u--input>

								</u-form-item>
							</view>
						</view>
					</view>


					<view class="body_start">
						<view class="body_start_top">
							<text><span class="text-body">*</span></text>
							<view class="body_start_left">
								个性签名:
							</view>
						</view>

						<view class="body_start_bottom">
							<view class="u-inputss">
								<u-form-item style="width: 193px;height: 35px;" prop="autograph" ref="item1">

									<u--input type="text" v-model="form.autograph" border="none" placeholder="请输入内容"
										clearable></u--input>

								</u-form-item>
							</view>
						</view>
					</view>
				</view>
			</u--form>

			<view class="btn-box">
				<u-button color="#f90" style="width: 106px;height: 35px;" text="确定" @click="newedit"></u-button>
				<u-button color="#19be6b" style="width: 106px;height: 35px;" text="取消" @click="backPage"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	
	export default {
		data() {
			return {
				form: {
					name: "",
					autograph: ""
				},
				rules: {
					name: {
						type: 'string',
						min: 3,
						max: 10,
						required: true,
						message: "此为必填项",
						trigger: ['blur', 'change']
					},
					autograph: {
						type: 'string',
						max: 20,
						required: true,
						message: "此为必填项",
						trigger: ['blur', 'change']
					}
				},
				fileList: [],
				newImg: "/static/kong.jpeg" || []
			}
		},
		onLoad() {
			console.log(this.userInfo);
			this.form.name = this.userInfo.name
			this.form.autograph = this.userInfo.desc
			uni.request({
			    url: 'https://eggblog.bluej.cn/api/user/searchUser', //查看用户信息。
			    data: {
			        id:this.userInfo.id,
					projectId: 168
			    },
			    header: {
			        "x-token": this.userInfo.token //自定义请求头信息
			    },
			    success: (res) => {
			        console.log(res);
			        this.form.name = res.data.data.name;
					this.form.autograph =  res.data.data.desc;
					if(!res.data.data.avatar) return
					this.newImg = res.data.data.avatar;
			    }
			});

		},
		methods: {
			
			backPage() {
				uni.switchTab({
					url: '/pages/my/my',
				});
			},
			uploadImg() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res);
						console.log(res.tempFilePaths[0]);

						uni.uploadFile({
							url: 'https://eggblog.bluej.cn/api/imgUpload', // 图片上传
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								"x-token": _this.userInfo.token
							},
							success: res => {
								console.log(JSON.parse(res.data));
								const fileData = JSON.parse(res.data)

								_this.$set(_this.fileList, 0, {
									status: 'success',
									url: fileData.data[0]
								})

								//	将图片上传后的URL保存到表单信息中
								_this.newImg = fileData.data[0]
							}
						})

					}
				});

			},
			newedit() {
				let _this = this;
				uni.request({
					method: 'PUT',
					url: 'https://eggblog.bluej.cn/api/user/edit', // 修改用户信息。
					data: {
						name: this.form.name,
						avatar: this.newImg,
						desc: this.form.autograph,
						projectId: 168
					},
					header: {
						"x-token": _this.userInfo.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						
						uni.switchTab({
							url: '/pages/my/my',
						});
				 },
					fail: err => {
						console.log(err);
					}
				});
				

			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 15px;
		box-sizing: border-box;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 10px;
		width: 345px;
		height: 378px;

		.u-form {

			// display: flex;
			// flex-direction: column;
			.u-form-body {
				.body_start {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.body_start_top {
						display: flex;
						align-items: center;

						.text-body {
							color: #fa3534;
						}

						.body_start_left {
							font-size: 14px;
							color: #303133;
						}
					}

					.body_start_bottom {
						width: 215px;
						height: 81px;
						display: flex;
						align-items: center;

						.body_start_right {
							border-radius: 7px;
							border: 1px solid #c8c7cc;
							padding: 5px;
							box-sizing: border-box;
						}
					}

				}

				.u-inputss {
					width: 193px;
					border-color: rgb(220, 223, 230);
					border: 1px solid #dcdfe6;
					border-radius: 4px;
				}
			}
		}

		.btn-box {
			margin-top: 50px;
			display: flex;
			justify-content: space-evenly;
			width: 305px;
			height: 35px;
		}
	}
</style>
